<template>
  <div :class="['swiper-container','crew-swiper-container', propsClass,'ns-label-padding']">
    <div class="ns-flex-padding">
      <label>{{propsTitle}}</label>
    </div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"  v-for="item in movieSliderData" :key="item.id">
        <div :class="['ns-cell-img', {'ns-cell-pic':propsPic}]">
          <img :src="item.avatar" alt="">
        </div>
        <div v-show="!propsPic" class="ns-cell-label">{{item.name}}</div>
        <div v-show="!propsPic" class="ns-cell-label ns-gray">{{item.role ? item.role : `饰 ${item.description}` }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  export default {  
     props: ['movieSliderProps','propSlidesPerView','propsClass','propsPic','propsTitle'],
     data() {
      return {
          movieSliderData:[]
      }
    },
    mounted() {
        let $this = this;  
    },
    methods: {
      initSwiper(propClass,slidesPerView) {
        console.log('propClass,slidesPerView',propClass,slidesPerView)
        this.$nextTick(() => {
          var swiper = new Swiper(`.${propClass}`, {
            // pagination: '.swiper-pagination',
            // slidesPerView: 'auto',
            // centeredSlides: false,
            // spaceBetween: 5
            slidesPerView : slidesPerView,
				    spaceBetween : 5,
          })
        })
      }
    },
     watch: {
          movieSliderProps: function(newVal,oldVal){
              let $this = this;
              $this.movieSliderData = newVal; 
              console.log( $this.movieSliderData)                 
              $this.initSwiper($this.propsClass,$this.propSlidesPerView);
          }
      }
  }

</script>

<style scoped>
  .ns-label-padding {
    padding: 14px 0 14px 16px
  }

  .ns-flex-padding {
    padding-bottom: 14px;
  }
  .ns-cell-img {
      width: 100%;
      background-color: #888;
      position: relative;
      border-radius: .25rem;
  }
  .ns-cell-img:after {
      content: '';
      display: block;
      padding-top: 142%;
  }
  .ns-cell-pic:after {
      content: '';
      display: block;
      padding-top: 77%;
  }
  .ns-cell-img img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  .ns-gray {
      color: #888;
  }
  .ns-container label {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    color: #000;
  }

  .ns-cell-label {
    display: block;
    padding-top: .375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 5rem;
  }

  .ns-cell-label {
    display: block;
    padding-top: .375rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 5rem;
  }
  .swiper-container {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      background-color: #fff;
  }
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    font-size: 13px;
}
.swiper-container label {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    color: #000;
}
</style>
